<template>
  <div class="myPurchaseBody orderBody wap">
    <div class="MPHead">
      <x-header v-if="!this.$fromApp(this)" :left-options="{backText: ''}" @on-click-back="goBack">
        <span>我的订单</span>
      </x-header>
      <div class="statusList display-flex flex-direction-row">
        <div
          @click="selectTabFn(0)"
          style="width: 21%"
          :style="{borderBottomColor:(selectTab==0?'#527DD9':'#FFFFFF'),fontWeight:(selectTab==0?'bold':'normal')}"
          class="statusListItem ml display-flex flex-direction-row align-items-center justify-content-flex-center"
        >
          <div
            class="tabName display-flex flex-direction-column align-items-center justify-content-flex-center"
          >所有订单</div>
        </div>
        <div
          @click="selectTabFn(5)"
          style="width: 21%"
          :style="{borderBottomColor:(selectTab==5?'#527DD9':'#FFFFFF'),fontWeight:(selectTab==5?'bold':'normal')}"
          class="statusListItem mr display-flex flex-direction-row align-items-center justify-content-flex-center"
        >
          <div
            class="tabName display-flex flex-direction-column align-items-center justify-content-flex-center"
          >
            待确认
            <p
              class="display-flex flex-direction-row align-items-center justify-content-flex-center"
              v-show="waitAuth>0"
            >
              <span>{{waitAuth}}</span>
            </p>
          </div>
        </div>
        <div
          @click="selectTabFn(1)"
          style="width: 21%"
          :style="{borderBottomColor:(selectTab==1?'#527DD9':'#FFFFFF'),fontWeight:(selectTab==1?'bold':'normal')}"
          class="statusListItem mr display-flex flex-direction-row align-items-center justify-content-flex-center"
        >
          <div
            class="tabName display-flex flex-direction-column align-items-center justify-content-flex-center"
          >
            待付款
            <p
              class="display-flex flex-direction-row align-items-center justify-content-flex-center"
              v-show="waitPay>0"
            >
              <span>{{waitPay}}</span>
            </p>
          </div>
        </div>
        <div
          @click="selectTabFn(2)"
          style="width: 21%"
          :style="{borderBottomColor:(selectTab==2?'#527DD9':'#FFFFFF'),fontWeight:(selectTab==2?'bold':'normal')}"
          class="statusListItem mr display-flex flex-direction-row align-items-center justify-content-flex-center"
        >
          <div
            class="tabName display-flex flex-direction-column align-items-center justify-content-flex-center"
          >
            待配送
            <p
              class="display-flex flex-direction-row align-items-center justify-content-flex-center"
              v-show="waitDeliver>0"
            >
              <span>{{waitDeliver}}</span>
            </p>
          </div>
        </div>
        <div
          @click="selectTabFn(3)"
          style="width: 21%"
          :style="{borderBottomColor:(selectTab==3?'#527DD9':'#FFFFFF'),fontWeight:(selectTab==3?'bold':'normal')}"
          class="statusListItem mr display-flex flex-direction-row align-items-center justify-content-flex-center"
        >
          <div
            class="tabName display-flex flex-direction-column align-items-center justify-content-flex-center"
          >交易完成</div>
        </div>
        <div
          @click="selectTabFn(4)"
          style="width: 16%"
          :style="{borderBottomColor:(selectTab==4?'#527DD9':'#FFFFFF'),fontWeight:(selectTab==4?'bold':'normal')}"
          class="statusListItem mr display-flex flex-direction-row align-items-center justify-content-flex-center"
        >
          <div
            class="tabName display-flex flex-direction-column align-items-center justify-content-flex-center"
          >已取消</div>
        </div>
      </div>
    </div>
    <div class="main">
      <scroller
        class="MPContent"
        :on-refresh="refresh"
        :on-infinite="infinite"
        ref="my_order_scroller"
      >
        <div
          v-if="!loading&&dataArr==''"
          class="display-flex flex-direction-row align-items-center justify-content-flex-center"
        >
          <p style="margin-top: .5rem;color: #666666">暂无数据~</p>
        </div>
        <div style="height: 1px;"></div>
        <div
          v-for="(item, index) in dataArr"
          :key="index"
          class="orderBox display-flex flex-direction-column"
        >
          <div class="orderTitle display-flex flex-direction-row">
            <div
              class="shopLogo display-flex flex-direction-row align-items-center justify-content-flex-center"
            >
              <img @click="goShop(item)" v-lazy="yasuo(item.buyerDistributorVO.logo)" alt />
            </div>
            <div class="shopName display-flex flex-direction-column justify-content-flex-center">
              <div
                style="font-size: 14px;font-weight: bold;color: #333333"
                class="display-flex flex-direction-row justify-content-flex-justify"
              >
                <p class="shopNameText" @click="goShop(item)">{{item.buyerDistributorVO.name}}</p>
                <p v-if="item.authState==0">待确认</p>
                <p
                  v-else
                >{{item.completeState==0?'已取消':(item.completeState==2?'已完成':(item.payState==0?'未支付':'已支付'))}}</p>
              </div>
              <div
                style="font-size: 12px;"
                class="display-flex flex-direction-row justify-content-flex-justify"
              >
                <span style="color: #666666;">{{item.creTime}}</span>
                <div v-if="item.authState!=0" class="display-flex flex-direction-row">
                  <span
                    v-if="item.completeState==0"
                    :style="{color:(item.payState==0?'#FAB945':'#4DC0A1')}"
                  >[{{item.payState==0?'未支付':'已支付'}}]</span>
                  <span
                    :style="{color:(item.deliverState==0?'#FAB945':'#4DC0A1')}"
                  >[{{item.deliverState==0?'未配送':'已配送'}}]</span>
                </div>
              </div>
            </div>
          </div>
          <div class="orderContent display-flex flex-direction-column">
            <div
              v-for="(j,index) in (item.saleOrderDetailVOList||'').slice(0,3)"
              :key="index"
              class="orderItemList display-flex flex-direction-column"
            >
              <div class="orderItem display-flex flex-direction-row justify-content-flex-justify">
                <img @click="goOrderDetail(j.saleOrderId)" v-lazy="yasuo(j.goodsPic)" alt />
                <div class="orderDetail display-flex flex-direction-column">
                  <p
                    @click="goOrderDetail(j.saleOrderId)"
                    style="color: #333333;font-size: 13px;"
                  >[{{j.brandName}}]{{j.goodsName}}</p>
                  <div>
                    <span class="goodsDetail">
                      <span>{{j.goodsSpec}}</span>
                    </span>
                  </div>
                  <div
                    class="display-flex flex-direction-row justify-content-flex-justify align-items-center"
                  >
                    <p v-if="j.taxPrice&&j.taxPrice!=0">
                      <span style="color: #FC6E51;font-size: 11px">￥</span>
                      <span style="color: #FC6E51;font-size: 18px">{{j.taxPrice}}</span>
                      <span style="color: #666666;font-size: 12px">/{{j.unitName}}</span>
                    </p>
                    <p v-else>
                      <span v-if="j.enquiry==0" style="color: #FC6E51;font-size: 11px">赠品</span>
                      <span v-else style="color: #FC6E51;">
                        询价
                        <span style="color: #666666;">/{{j.unitName}}</span>
                      </span>
                    </p>
                    <p>×{{j.num}}</p>
                  </div>
                </div>
              </div>
            </div>
            <template v-if="item.loadMore">
              <div
                v-for="(j,index) in (item.saleOrderDetailVOList||'').slice(3)"
                :key="'more'+index"
                class="orderItemList display-flex flex-direction-column"
              >
                <div class="orderItem display-flex flex-direction-row justify-content-flex-justify">
                  <img @click="goOrderDetail(j.saleOrderId)" :src="j.goodsPic" alt />
                  <div class="orderDetail display-flex flex-direction-column">
                    <p
                      @click="goOrderDetail(j.saleOrderId)"
                      style="color: #333333;font-size: 13px;"
                    >[{{j.brandName}}]{{j.goodsName}}</p>
                    <div>
                      <span class="goodsDetail">
                        <span>{{j.goodsSpec}}</span>
                      </span>
                    </div>
                    <div
                      class="display-flex flex-direction-row justify-content-flex-justify align-items-center"
                    >
                      <p v-if="j.taxPrice&&j.taxPrice!=0">
                        <span style="color: #FC6E51;font-size: 11px">￥</span>
                        <span style="color: #FC6E51;font-size: 18px">{{j.taxPrice}}</span>
                        <span style="color: #666666;font-size: 12px">/{{j.unitName}}</span>
                      </p>
                      <p v-else>
                        <span v-if="j.enquiry==0" style="color: #FC6E51;font-size: 11px">赠品</span>
                        <span v-else style="color: #FC6E51;">
                          询价
                          <span style="color: #666666;">/{{j.unitName}}</span>
                        </span>
                      </p>
                      <p>×{{j.num}}</p>
                    </div>
                  </div>
                </div>
              </div>
            </template>
            <div
              v-if="item.saleOrderDetailVOList.length>3"
              class="loadMore display-flex flex-direction-row justify-content-flex-center align-items-center"
            >
              <p
                v-if="!item.loadMore"
                class="display-flex flex-direction-row justify-content-flex-center align-items-center"
                @click="loadMoreFn(index)"
              >
                <span style="color: #666666">共有{{item.saleOrderDetailVOList.length}}条信息</span>
                <img
                  src="../../assets/img/cart/down.png"
                  alt
                  style="width: .2rem;height: .25rem;margin-left: .1rem"
                />
              </p>
              <p
                v-else
                class="display-flex flex-direction-row justify-content-flex-center align-items-center"
                @click="loadMoreFn(index)"
              >
                <span style="color: #666666">收&nbsp;&nbsp;起</span>
              </p>
            </div>
            <div class="orderPrice display-flex flex-direction-column align-items-flex-end">
              <div
                class="payNum display-flex flex-direction-row align-items-center justify-content-flex-center"
              >
                <span>{{item.payState==1?'实付款':'待付款'}}：</span>
                <p style="color: #FB6E52;font-weight: bold">￥ {{item.realAmount}}</p>
              </div>
              <div class="payWay">
                <span v-if="item.payWay==1">付款方式：{{item.payWayDesc}}</span>
                <span
                  v-if="item.creditSaleDay&&item.creditSaleDay>0&&item.payWay==2"
                >付款方式：赊销{{item.creditSaleDay}}天</span>
                <span v-if="item.payState==1" style="margin-left: .3rem">付款日期：{{item.payTime}}</span>
              </div>
              <div class="display-flex flex-direction-row">
                <div
                  v-if="item.completeState==1&&item.payState==1&&item.deliverState==1"
                  class="successBtn display-flex flex-direction-row justify-content-flex-center align-items-center"
                  @click="showSuccessConfirmFn(item.id)"
                >
                  <p>完成交易</p>
                </div>
                <div
                  v-if="item.completeState==1&&item.authState==0"
                  class="successBtn display-flex flex-direction-row justify-content-flex-center align-items-center"
                  @click="authStateFn(item.id)"
                >
                  <p>确认订单</p>
                </div>
                <div
                  v-if="item.completeState==1"
                  class="cancelBtn display-flex flex-direction-row justify-content-flex-center align-items-center"
                  @click="showCancelConfirmFn(item)"
                >
                  <p>取消订单</p>
                </div>
                <div
                  v-if="item.completeState==0"
                  class="cancelBtn display-flex flex-direction-row justify-content-flex-center align-items-center"
                  @click="showDeleteConfirmFn(item.id)"
                >
                  <p>删除订单</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </scroller>
    </div>

    <div v-transfer-dom>
      <confirm v-model="showSuccessConfirm" @on-confirm="successFn">
        <p style="text-align:center;font-size: 18px">确定把订单状态修改为已完成？</p>
      </confirm>
    </div>
    <div v-transfer-dom>
      <confirm v-model="showAuthStateConfirm" @on-confirm="authStateFn">
        <p style="text-align:center;font-size: 18px">确定订单？</p>
      </confirm>
    </div>
    <div v-transfer-dom>
      <confirm v-model="showCancelConfirm" @on-confirm="cancelFn">
        <p style="text-align:center;font-size: 18px">{{cancelText}}确定取消订单？</p>
      </confirm>
    </div>
    <div v-transfer-dom>
      <confirm v-model="showDeleteConfirm" @on-confirm="deleteFn">
        <p style="text-align:center;font-size: 18px">确定删除订单？</p>
      </confirm>
    </div>
  </div>
</template>

<script>
import { Storage } from "@/service/storage";
export default {
  name: "myPurchase",
  data() {
    return {
      selectTab: 0,
      dataArr: [],
      waitAuth: 0,
      waitPay: 0,
      waitDeliver: 0,
      shopId: "",
      tab3LHeight: "",
      isAppHeadHeight: "",
      pageNo: 0,
      successOrderId: "",
      authStateId: "",
      cancelOrderId: "",
      deleteOrderId: "",
      showSuccessConfirm: false,
      showAuthStateConfirm: false,
      showCancelConfirm: false,
      showDeleteConfirm: false,
      cancelText: "",
      isScroll: true,
      noData: false,
      loading: true,
      showLogout: this.$fromApp(this)
    };
  },
  beforeRouteLeave(to, from, next) {
    //记录离开时的位置
    let currentPosition =
      this.$refs.my_order_scroller &&
      this.$refs.my_order_scroller.getPosition() &&
      this.$refs.my_order_scroller.getPosition().top;

    if (this.selectTab == 0) {
      sessionStorage.order0ContentP = currentPosition ? currentPosition : 0;
    } else if (this.selectTab == 1) {
      sessionStorage.order1ContentP = currentPosition ? currentPosition : 0;
    } else if (this.selectTab == 2) {
      sessionStorage.order2ContentP = currentPosition ? currentPosition : 0;
    } else if (this.selectTab == 3) {
      sessionStorage.order3ContentP = currentPosition ? currentPosition : 0;
    } else if (this.selectTab == 4) {
      sessionStorage.order4ContentP = currentPosition ? currentPosition : 0;
    } else {
      sessionStorage.order5ContentP = currentPosition ? currentPosition : 0;
    }
    next();
  },
  mounted() {
    window["androidCallJs"] = this.androidCallJs;
    document
      .getElementsByClassName("orderBody")[0]
      .addEventListener("touchmove", this.touchMoveScroll, false);
    this.shopId = this.$route.query.sellId;
    this.getStatistics();

    if (sessionStorage.orderNum) {
      this.selectTabFn(parseInt(sessionStorage.orderNum));
    } else {
      sessionStorage.orderNum = 0;
    }
  },
  destroyed() {
    document
      .getElementsByClassName("orderBody")[0]
      .removeEventListener("touchmove", this.touchMoveScroll, false);
  },
  methods: {
    logout() {
      Storage.remove("token");
      this.$router.replace({
        path: "/login",
        query: { sellerId: this.$route.query.id }
      });
    },
    yasuo(img) {
      if (!img) return "";
      return img.indexOf("?") == -1 ? img + "?yasuo" : img;
    },
    androidCallJs(val) {
      try {
        if (val) {
          val = decodeURIComponent(val.replace(/\+/g, "%20"));
          let obj = JSON.parse(val);
          console.log("===val", obj);
          if (obj) {
            if (obj.code == 1017) {
              this.selectTabFn(parseInt(sessionStorage.orderNum));
              this.getStatistics();
            }
          }
        }
      } catch (e) {}
    },
    touchMoveScroll() {
      this.isScroll = false;
      setTimeout(() => {
        this.isScroll = true;
      }, 3000);
    },
    currentPosition() {
      let currentPosition =
        this.$refs.my_order_scroller &&
        this.$refs.my_order_scroller.getPosition() &&
        this.$refs.my_order_scroller.getPosition().top;

      if (this.selectTab == 0) {
        sessionStorage.order0ContentP = currentPosition ? currentPosition : 0;
      } else if (this.selectTab == 1) {
        sessionStorage.order1ContentP = currentPosition ? currentPosition : 0;
      } else if (this.selectTab == 2) {
        sessionStorage.order2ContentP = currentPosition ? currentPosition : 0;
      } else if (this.selectTab == 3) {
        sessionStorage.order3ContentP = currentPosition ? currentPosition : 0;
      } else if (this.selectTab == 4) {
        sessionStorage.order4ContentP = currentPosition ? currentPosition : 0;
      } else {
        sessionStorage.order5ContentP = currentPosition ? currentPosition : 0;
      }
    },
    getScroll() {
      let position = 0;
      if (this.selectTab == 0 && sessionStorage.order0ContentP) {
        position = sessionStorage.order0ContentP;
      } else if (this.selectTab == 1 && sessionStorage.order1ContentP) {
        position = sessionStorage.order1ContentP;
      } else if (this.selectTab == 2 && sessionStorage.order2ContentP) {
        position = sessionStorage.order2ContentP;
      } else if (this.selectTab == 3 && sessionStorage.order3ContentP) {
        position = sessionStorage.order3ContentP;
      } else if (this.selectTab == 4 && sessionStorage.order4ContentP) {
        position = sessionStorage.order4ContentP;
      } else if (this.selectTab == 5 && sessionStorage.order5ContentP) {
        position = sessionStorage.order5ContentP;
      }
      setTimeout(() => {
        this.$refs.my_order_scroller.scrollTo(0, position, false);
      }, 100);
    },
    loadMoreFn(i) {
      this.dataArr[i].loadMore = !this.dataArr[i].loadMore;
      this.$set(this.dataArr, i, this.dataArr[i]);
    },
    goShop(val) {
      // if(this.$fromApp(this)){
      //   this.$router.push({path:'/purchase/storePage',query:{id:val.buyerDistributorVO.id,name:encodeURIComponent(val.buyerDistributorVO.name),phone:val.buyerDistributorVO.phone,from:'app'}})
      // }else{
      //   this.$router.push({path:'/purchase/storePage',query:{id:val.buyerDistributorVO.id,name:encodeURIComponent(val.buyerDistributorVO.name),phone:val.buyerDistributorVO.phone}})
      // }
      // if (this.$fromApp(this)) {
      //   this.$callJava({url: this.$webUrl + "purchase/storePage?from=app&id=" + val.buyerDistributorVO.id})
      // } else {
      this.$router.push({
        path: "/purchase/storePage",
        query: { id: val.buyerDistributorVO.id }
      });
      // }
    },
    getStatistics() {
      this.$ajax.get("sale/statistics", res => {
        this.waitAuth = res.data.waitAuth;
        this.waitPay = res.data.waitPay;
        this.waitDeliver = res.data.waitDeliver;
      });
    },
    selectTabFn(val, type) {
      if (type != 1) {
        let currentPosition =
          this.$refs.my_order_scroller &&
          this.$refs.my_order_scroller.getPosition() &&
          this.$refs.my_order_scroller.getPosition().top;

        if (this.selectTab == 0) {
          if (currentPosition != 0) {
            sessionStorage.order0ContentP = currentPosition
              ? currentPosition
              : 0;
          }
        } else if (this.selectTab == 1) {
          sessionStorage.order1ContentP = currentPosition ? currentPosition : 0;
        } else if (this.selectTab == 2) {
          sessionStorage.order2ContentP = currentPosition ? currentPosition : 0;
        } else if (this.selectTab == 3) {
          sessionStorage.order3ContentP = currentPosition ? currentPosition : 0;
        } else if (this.selectTab == 4) {
          sessionStorage.order4ContentP = currentPosition ? currentPosition : 0;
        } else {
          sessionStorage.order5ContentP = currentPosition ? currentPosition : 0;
        }
        // console.log(currentPosition,"current")
        // console.log(this.selectTab,"current")
        this.isScroll = true;
        this.loading = true;
        this.pageNo = 0;
        this.noData = false;
        sessionStorage.orderNum = this.selectTab = val;
        this.$refs.my_order_scroller.finishInfinite(false);
        this.dataArr = [];
        this.initData(val, 1);
      }
    },
    initData(tabType, pageNo, done) {
      this.$ajax.get(
        "sale/list",
        res => {
          this.loading = false;
          if (res.code == "200") {
            for (let i = 0; i < res.data.length; i++) {
              res.data[i].loadMore = false;
            }
            console.log(pageNo);
            if (pageNo === 1) {
              this.dataArr = res.data;
            } else {
              this.dataArr = this.dataArr.concat(res.data);
            }
            if (this.isScroll) {
              this.getScroll();
            }
            if (typeof done == "function") {
              done();
            }

            if (this.$refs.my_order_scroller) {
              this.$refs.my_order_scroller.finishPullToRefresh();
            }

            if (!res.data || res.data.length < 10) {
              //每次请求数据是10条，如果数据不够10条，就是没数据了 让页数=0；
              this.noData = true;
              if (this.$refs.my_order_scroller) {
                this.$refs.my_order_scroller.finishInfinite(true);
              }
            }
          } else {
            this.$vux.toast.text(res.msg, "center");
          }
        },
        { orderStateType: tabType, pageNo: pageNo, pageSize: 10 }
      );
    },
    showSuccessConfirmFn(id) {
      this.successOrderId = id;
      this.showSuccessConfirm = true;
    },
    showAuthStateConfirmFn(id) {
      this.authStateId = id;
      this.showAuthStateConfirm = true;
    },
    showCancelConfirmFn(item) {
      if (item.deliverState == 1) {
        this.cancelText = "订单已配送,";
      } else {
        this.cancelText = "";
      }
      this.cancelOrderId = item.id;
      this.showCancelConfirm = true;
    },
    showDeleteConfirmFn(id) {
      this.deleteOrderId = id;
      this.showDeleteConfirm = true;
    },
    successFn() {
      this.currentPosition();
      this.$ajax.get(
        "sale/complete",
        res => {
          if (res.code == "200") {
            this.pageNo = 1;
            this.getStatistics();
            this.initData(this.selectTab, 1);
          } else {
            this.$vux.toast.text(res.msg, "center");
          }
        },
        { saleOrderId: this.successOrderId }
      );
    },
    authStateFn(id) {
      this.currentPosition();
      this.$ajax.get(
        "sale/authOrder",
        res => {
          if (res.code == "200") {
            this.$vux.toast.text("确认成功", "center");
            this.pageNo = 1;
            this.getStatistics();
            this.initData(this.selectTab, 1);
          } else {
            this.goOrderDetail(id)
            this.$vux.toast.text(res.msg, "center");
          }
        },
        { saleOrderId: id }
      );
    },
    cancelFn() {
      this.currentPosition();
      this.$ajax.get(
        "sale/cancel",
        res => {
          if (res.code == "200") {
            this.pageNo = 1;
            this.getStatistics();
            this.initData(this.selectTab, 1);
          } else {
            this.$vux.toast.text(res.msg, "center");
          }
        },
        { saleOrderId: this.cancelOrderId }
      );
    },
    deleteFn() {
      this.currentPosition();
      this.$ajax.get(
        "sale/delete",
        res => {
          if (res.code == "200") {
            this.pageNo = 1;
            this.getStatistics();
            this.initData(this.selectTab, 1);
          } else {
            this.$vux.toast.text(res.msg, "center");
          }
        },
        { saleOrderId: this.deleteOrderId }
      );
    },
    goOrderDetail(id) {
      if (this.$fromApp(this)) {
        this.$callJava({
          url: this.$webUrl + "order/saleOrderDetails?from=app&id=" + id,
          title: "订单详情"
        });
        // this.$router.push({path:'/order/saleOrderDetails',query:{id:id,from:'app'}})
      } else {
        this.$router.push({
          path: "/order/saleOrderDetails",
          query: { id: id }
        });
      }
    },
    refresh(done) {
      if (this.selectTab == 0) {
        sessionStorage.order0ContentP = 0;
      } else if (this.selectTab == 1) {
        sessionStorage.order1ContentP = 0;
      } else if (this.selectTab == 2) {
        sessionStorage.order2ContentP = 0;
      } else if (this.selectTab == 3) {
        sessionStorage.order3ContentP = 0;
      } else if (this.selectTab == 4) {
        sessionStorage.order4ContentP = 0;
      } else {
        sessionStorage.order5ContentP = 0;
      }
      this.pageNo = 0;
      this.initData(this.selectTab, 1, done);
    },
    infinite(done) {
      setTimeout(() => {
        if (!this.noData) {
          this.pageNo++;
          this.initData(this.selectTab, this.pageNo, done);
          this.$refs.my_order_scroller &&
            this.$refs.my_order_scroller.finishInfinite(true);
        } else {
          this.$refs.my_order_scroller.finishInfinite(true);
        }
      }, 50);
      // setTimeout(() => {
      //   if (!this.noData) {
      //     this.initData(this.selectTab,1);
      //     done(true)
      //   } else {
      //     this.$refs.my_order_scroller&&this.$refs.my_order_scroller.finishInfinite(false)
      //     done(true)
      //   }
      // }, 50)
    }
  }
};
</script>

<style lang="less" type="text/less" scoped>
.myPurchaseBody {
  .editBtn {
    color: #ffffff;
  }
  .MPHead {
    background-color: #ffffff;

    .statusList {
      height: 1.01rem;
      margin: 0 0.1rem;

      .statusListItem {
        border-bottom: 2px #ffffff solid;

        .tabName {
          font-size: 13px;
          position: relative;
          height: 1rem;

          p {
            position: absolute;
            top: 0.1rem;
            right: -0.28rem;
            font-weight: normal !important;
            font-size: 10px;
            color: #ff3c4a;
            width: 0.3rem;
            height: 0.3rem;
            text-align: center;
            line-height: 0.3rem;
            border-radius: 0.15rem;
            border: 1px solid #ff3c4a;
            background-color: #ffffff;
          }
        }
      }

      .mr {
        width: 18%;
        margin: 0 1%;
      }

      .ml {
        width: 16%;
        margin: 0 2%;
      }
    }
  }

  .MPContent {
    .orderBox {
      border-radius: 10px;
      margin: 0.1rem 0.3rem 0.3rem;
      background-color: #ffffff;

      .orderTitle {
        height: 1.37rem;
        border-bottom: 1px solid #ebebeb;

        .shopLogo {
          width: 1.26rem;
          height: 1.37rem;

          img {
            width: 0.78rem;
            height: 0.78rem;
          }
        }

        .shopName {
          width: 5.3rem;
          height: 1.37rem;

          .shopNameText {
            width: 4rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
      }

      .orderContent {
        margin: 0 0.24rem 0.2rem;

        .orderItemList {
          border-bottom: 1px solid #ebebeb;

          .orderItem {
            margin: 0.2rem 0;

            img {
              width: 1.4rem;
              height: 1.4rem;
            }

            .orderDetail {
              width: 4.7rem;

              .goodsDetail {
                span {
                  color: #999999;
                  height: 0.32rem;
                  background-color: #eeeeee;
                  border-radius: 0.16rem;
                  padding: 0 0.15rem;
                  margin-top: 0.05rem;
                  font-size: 10px;
                }
              }
            }
          }
        }

        .orderPrice {
          .payNum {
            height: 0.6rem;
            font-size: 13px;
          }

          .payWay {
            color: #999999;
            font-size: 13px;
          }

          .successBtn {
            height: 0.56rem;
            border: 1px solid #ff9800;
            border-radius: 0.28rem;
            padding: 0 0.4rem;
            margin-top: 0.2rem;
            font-size: 14px;
            color: #ff9800;
          }

          .cancelBtn {
            height: 0.56rem;
            border: 1px solid #c9c9c9;
            border-radius: 0.28rem;
            padding: 0 0.4rem;
            margin-top: 0.2rem;
            margin-left: 0.2rem;
            font-size: 14px;
            color: #333333;
          }
        }

        .loadMore {
          p {
            margin: 0.3rem 0;
            border: 1px solid #eeeeee;
            height: 0.6rem;
            border-radius: 0.3rem;
            padding: 0 0.3rem;
          }
        }
      }
    }
  }
}
</style>
